import { getCurrentInstance, onMounted, onUnmounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';

export default function importConfig(props) {
  const { width, height, chartData } = props;
  const myEcharts = echarts;
  const animationDuration = 6000;

  onMounted(() => {
    setTimeout(() => {
      initChart();
    }, 100);
  });

  onUnmounted(() => {
    myEcharts.dispose;
  });

  function initChart() {
    const chart = myEcharts.init(document.getElementById('barChart'), 'purple-passion');

    const opt1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        top: 10,
        left: '2%',
        right: '2%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: 'pageA',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [79, 52, 200, 334, 390, 330, 220],
          animationDuration,
        },
        {
          name: 'pageB',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [80, 52, 200, 334, 390, 330, 220],
          animationDuration,
        },
        {
          name: 'pageC',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: [30, 52, 200, 334, 390, 330, 220],
          animationDuration,
        },
      ],
    };

    chart.setOption(opt1);
    window.addEventListener('resize', function () {
      chart.resize();
    });
  }

  return {};
}
